<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit" />
  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
  <link rel="icon" type="image/png" href="/img/app-icon72x72.png" />
  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes" />
  <link rel="icon" sizes="192x192" href="/img/app-icon72x72@2x.png" />
  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="标题" />
  <link rel="apple-touch-icon-precomposed" href="/img/app-icon72x72@2x.png" />
  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="/img/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#0e90d2" />
  <meta name="viewport" content="width=1200, user-scalable=yes">
  <title>场馆预定</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- /meta -->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/pace-theme-minimal.min.css"
    rel="stylesheet">
  <!--[if lte IE 9]>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
  <!--[if gt IE 9]><!-->
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/jquery.3.3.1min.js"></script>
  <!--<![endif]-->
  <!-- /script -->

  <link rel="stylesheet" href="css/main.min.css">

  <!-- /style -->
</head>

<body>

  <div class="page page-venue">

    <section class="common_header_item">
      <header class="page__header" id="header"></header>
      <section class="section page__main_nav" id="pageNav"></section>
    </section>
    <!-- /header -->
    <main class="page__container">
      <section class="section section__breadcrumb">
        <div class="section__wrapper">
          <div class="pure-u-1">
            <div class="column-inner">
              <div class="nav__breadcrumb">
                <a class="item" href="index.html">首页</a>
                <span class="separator">&gt;</span>
                <a class="item active" href="javascript:void(0)">场馆预定</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- / breadcrumb -->
      <!-- 分类 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module-filter-wrapper">
              <div class="module module-filter">
                <h3 class="title"><i class="iconfont icon-activity-fill"></i>场馆分类 :</h3>
                <div class="module-filter-list" id="category">
                  <!-- <a class="item active" data-filter="activity-channel-1" href="#">全部</a>
                  <a class="item" data-filter="activity-channel-2" href="#">文化站</a>
                  <a class="item" data-filter="activity-channel-3" href="#">基层文化站</a>
                  <a class="item" data-filter="activity-channel-4" href="#">其他</a> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 列表内容 -->
      <section class="section">
        <div class="section__wrapper">
          <div class="section__container">
            <div class="module media-list" id="venue">
              <!-- 数据渲染 -->
            </div>
          </div>
        </div>
      </section>
      <nav class="page-pagination" aria-label="page-pagination" id="pages">
        <!-- <ul class="pagination">
          <li class="item previous"><a href="#" aria-label="Previous" aria-hidden="true">首页</a>
          </li>
          <li class="item active"><a href="#">1</a>
          </li>
          <li class="item"><span>2</span>
          </li>
          <li class="item"><a href="#">3</a>
          </li>
          <li class="item"><a href="#">4</a>
          </li>
          <li class="item"><a href="#">5</a>
          </li>
          <li class="item"><a href="#">6</a>
          </li>
          <li class="item next"><a href="#" aria-label="Next" aria-hidden="true">下一页</a>
          </li>
          <li class="item">跳转到</li>
          <li class="item">
            <input type="text" />
          </li>
          <li class="item">页</li>
          <li class="item active"><a href="#">&nbsp;&nbsp;GO&nbsp;&nbsp;</a>
          </li>
          <li class="item news-number">当前共有<i>1000</i>条</li>
        </ul> -->
      </nav>
      <!-- / pagination -->
    </main>
    <!-- / container -->

    <footer class="page__footer">

    </footer>
    <!-- / footer -->
    <!-- 通用组件 -->
    <script src="js/page-header.js"></script>
    <script src="js/page-footer.js"></script>
    <!-- / pendant -->
  </div>
  <!-- /page -->
  <!-- <script type="text/html" id="tplTeml">
    <div class="pure-u-1-4">
      <div class="column-inner">
        <div class="media media__type_01 media__bdtype_01 media-bg-white media-normal media-card">
          <a class="object" href="#">
            <img class="img-responsive" src="http://via.placeholder.com/280x170" width="280" height="170" alt="">
          </a>
          <div class="caption">
            <div class="headline">
              <a href="#" target="_blank" class="singleline">浙江省未成年人“戏曲阅读经典”大赛决赛</a>
            </div>
            <div class="abstract">
              <p class="singleline"><i class="iconfont">&#xe617;</i> 广西南宁市民主路 11-4 号</p>
              <div class="appointment">
                  <a href="#">可预约</a>
              </div></div></div></div></div></div>
  </script> -->


  <script
    src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/underscore-min-1.8.3/underscore-min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/bowser.min.js"></script>
  <script
    src="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.jquery.min.js"></script>
  <link
    href="https://wenhuabu-media.bj.bcebos.com/front-end-engineer/Intangible-heritage/static/js/xianwenhauyun/swiper3.4.2.min.css"
    rel="stylesheet">
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/layer-3.0.3/layer.min.js"></script>
  <script src="https://culturetv.hanyastar.com.cn/national_culture_file/pcjs/js.cookie-2.20/js.cookie.js"></script>



  <!-- 前端交互脚本 -->
  <script src="js/common/xtab.js"></script>
  <script src="js/common/xbar.js"></script>
  <script src="js/common/util.js"></script>

  <script src="js/app.js"></script>
  <script src="js/common.min.js"></script>
  <script src="js/common.js"></script>


  <script src="js/common/gb2260.js"></script>
  <script src="js/common/hs-area.js"></script>
  <script src="js/hy.util.js"></script>
  <script src="js/util/page-helper.js"></script>
  <script src="js/page-nav.js"></script>
  <!-- /script -->
  <script>
    $(document).ready(function () {

      var parms = {
        //你的参数
        'catId': 100005,
        // 'resType': 'venue',
        'order': 1,
        'activityState': null,
        'outputTime': null,
        'collectionId': null,
        'keywords': null,
        'pageSize': 8,//每页条数
        'pageNumber': 1,//页码
      }
      var pageParms = {//根据这个来显示
        'currPage': 1,//当前页码
        'total': 30,//总条数
        'totalPage': 6,//总页码
        'pageSize': 5//每页条数
      }

      // 过滤标签没有加链接就阻止#跳转
      $('.module-filter-list').on('click', '.item', function (e) {
        var $this = $(this);
        typeid = $this.attr("data-typeid");
        parms.catId = typeid;
        loadHtml();
        if ($this.attr('href') === "#") {
          e.preventDefault();
        }
      });

      initCategoryList("#category", {
        'pid': parms.catId
      }, function (data) {
        $("#category").html("")
        var cateHtml = '';
        cateHtml += '<a class="item ' + (parms.catId == 0 ? 'active' : '') + '" data-filter="activity-channel-1" data-typeid="100005" href="#">全部</a>';
        var categorys = data.data;
        for (var i = 0; i < categorys.length; i++) {
          var cate = categorys[i];
          cateHtml += '<a class="item  ' + (parms.catId == cate.id ? 'active' : '') + '" data-filter="activity-channel-' + (i + 2) + '" data-typeid="' + cate.id + '" href="#">' + cate.name + '</a>';
        }
        $("#category").html(cateHtml)
      }, function () {

      })

      loadHtml()
      function loadHtml() {

        $.post(urlPath + "api/res/list", parms, function (data) {
          pageParms.currPage = data.currPage;
          pageParms.pageSize = data.pageSize;
          pageParms.totalPage = data.totalPage;
          pageParms.total = data.total;
          page(pageParms, "pages")
          //你要渲染的页面
          var html = '';
          var list = data.data;
          for (var i = 0; i < list.length; i++) {
            var venue = list[i];
            html += '<div class="pure-u-1-4">' +
              '<div class="column-inner">' +
              '<div class="media media__type_01 media__bdtype_01 media-bg-white media-normal media-card">' +
              '<a class="object" href="' + (venue.res.status == 1 ? 'venue-detail.html?pubId=' + venue.pubId : '#') + '">' +
              '<img class="" src="' + venue.poster + '" width="280" height="170" alt="">' +
              ' </a>' +
              '<div class="caption">' +
              '<div class="headline">' +
              '<a href="' + (venue.res.status == 1 ? 'venue-detail.html?pubId=' + venue.pubId : '#') + '" target="_blank" class="singleline">' + venue.title + '</a>' +
              '</div>' +
              '<div class="abstract">' +
              '<p class="singleline"><i class="iconfont">&#xe617;</i> ' + venue.res.address + '</p>' +
              '<div class="appointment">' +
              '<a href="' + (venue.res.status == 1 ? 'venue-detail.html?pubId=' + venue.pubId : '#') + '" >' + (venue.res.status == 1 ? "可预约" : "不可预约") + '</a>' +
              '</div></div></div></div></div></div>';
          }
          $("#venue").html(html)
        })
      }

      $('#pages').on('click', 'a', function (e) {
        var $this = $(this);
        pageNumber = $this.attr("pageNumber");
        var number = /^[0-9]*$/;
        var newPageNumber;
        if (pageNumber === "page") {
          //更新请求参数
          newPageNumber = number.test($("#page").val()) ? $("#page").val() : pageParms.currPage;
        } else {
          newPageNumber = pageNumber;
        }

        if (newPageNumber != pageParms.currPage) {
          parms.pageNumber = newPageNumber;
          loadHtml()
        }
        if ($this.attr('href') === "#") {
          e.preventDefault();
        }
      });


      // 过滤标签交互效果
      var myUtil = hs.util;
      myUtil.itemActive({
        parent: ".module-filter-list",
        item: '.item',
        active: 'active'
      });
      // 过滤标签没有加链接就阻止#跳转
      $('.module-filter-list').on('click', '.item', function (e) {
        var $this = $(this);
        if ($this.attr('href') === "#") {
          e.preventDefault();
        }
      });


      // 地址联动操作
      var myArea = new hs.area({
        activeProvinceCode: "450000",
        //activePrefectureCode: "450100"
        //or: activeCountyCode: "130303"
      });
      myArea.init();

      $('.j_select_area_submit').on('click', function () {
        $('[data-area-filter="all"]').removeClass('active');
      });

      $('[data-area-filter="all"]').on('click', function () {
        // do something
      });

      //模拟ajax
      // function ListDate(obj, sql, num) {
      //   var tpl = "";
      //   for (var i = 0; i < num; i++) {
      //     tpl += $('#' + sql).html();
      //   }
      //   $('.' + obj).append(tpl);
      // }
      // ListDate('media-list', 'tplTeml', 16);

    });
  </script>
</body>

</html>